/*
 * @Description: 
 * @Date: 2021-08-30 14:07:17
 * @Author: 刘元峰
 * @LastEditTime: 2021-08-31 15:10:02
 * @LastEditors: 刘元峰
 * @FilePath: \flutter_demo_list\lib\widgets\guide.dart
 */

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_intro/flutter_intro.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class GuidePage extends StatefulWidget {
  GuidePage({Key? key}) : super(key: key);

  @override
  _GuidePageState createState() => _GuidePageState();
}

class _GuidePageState extends State<GuidePage> {
  final GuidePageController vm = Get.put(GuidePageController());

  @override
  void initState() {
    super.initState();
    Timer(
      const Duration(
        milliseconds: 500,
      ),
      () {
        /// start the intro
        vm.intro.start(context);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // sometimes you need get current status
        final IntroStatus introStatus = vm.intro.getStatus();
        if (introStatus.isOpen) {
          // destroy guide page when tap back key
          vm.intro.dispose();
          return false;
        }
        return true;
      },
      child: Scaffold(
        body: Center(
          child: Column(
            children: [
              SizedBox(
                height: 300.w,
              ),
              Container(
                width: 200.w,
                height: 200.w,
                key: vm.intro.keys[1],
                color: Colors.black,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('第二步'),
                ),
              ),
              SizedBox(
                height: 100.w,
              ),
              Container(
                width: 200.w,
                height: 200.w,
                key: vm.intro.keys[0],
                color: Colors.red,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('第一步'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class GuidePageController extends GetxController {
  // 引导页面设置
  Intro intro = Intro(
    // 是否禁用动画，true为禁用
    noAnimation: false,

    // 引导页面数，必传
    stepCount: 2,

    // 点击是否允许关闭遮罩
    maskClosable: false,

    // 向导页文字描述
    widgetBuilder: StepWidgetBuilder.useDefaultTheme(
      texts: [
        '这是第一条提示',
        '这是第二条提示',
        // 'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
        // 'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
      ],
      buttonTextBuilder: (int curr, int total) {
        if (curr < total - 1) {
          return '下一步  【${curr + 1}/$total】';
        } else {
          return '完成  【${curr + 1}/$total】';
        }
      },
    ),
  );
  // late Intro intro;
  // GuidePageController() {
  //   intro = Intro(stepCount: 2, widgetBuilder: customThemeWidgetBuilder);
  // }

  // Widget customThemeWidgetBuilder(StepWidgetParams stepWidgetParams) {
  //   List<String> texts = [
  //     '这是第一步',
  //     '这是第二步',
  //     // 'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
  //     // 'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
  //   ];
  //   return Padding(
  //     padding: const EdgeInsets.all(
  //       32,
  //     ),
  //     child: Column(
  //       // ignore: always_specify_types
  //       children: [
  //         const SizedBox(
  //           height: 40,
  //         ),
  //         Text(
  //           '${texts[stepWidgetParams.currentStepIndex]}【${stepWidgetParams.currentStepIndex + 1} / ${stepWidgetParams.stepCount}】',
  //           style: const TextStyle(
  //             color: Colors.white,
  //             fontSize: 20,
  //           ),
  //         ),
  //         Row(
  //           children: [
  //             ElevatedButton(
  //               onPressed: stepWidgetParams.onPrev,
  //               child: const Text(
  //                 '上一步',
  //               ),
  //             ),
  //             const SizedBox(
  //               width: 16,
  //             ),
  //             ElevatedButton(
  //               // style: ButtonStyle(
  //               //     backgroundColor:
  //               //         MaterialStateProperty.all(Color(0xffEDFCF5))),
  //               onPressed: stepWidgetParams.onNext,
  //               child: const Text(
  //                 '下一步',
  //               ),
  //             ),
  //             const SizedBox(
  //               width: 16,
  //             ),
  //             ElevatedButton(
  //               onPressed: stepWidgetParams.onFinish,
  //               child: const Text(
  //                 '完成',
  //               ),
  //             ),
  //           ],
  //         ),
  //       ],
  //     ),
  //   );
  // }

  @override
  void onInit() {
    // 初始化配置，从第0步开始
    intro.setStepConfig(
      0,
      borderRadius: BorderRadius.circular(20.w),
    );

    super.onInit();
  }
}
